<template>
	<div class="diolog-group-table">
		<div style="width: 45%">
			<h4>已有{{ title }}</h4>
			<el-table
				:data="manageData"
				border
				style="margin-top:10px"
				@selection-change="handleManageSel"
			>
				<el-table-column type="selection" width="40"> </el-table-column>
				<el-table-column type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column :prop="colProp" label="名称"> </el-table-column>
			</el-table>
		</div>
		<div class="dialog-group-btn">
			<el-button
				@click="handleGroupChange('add')"
				:disabled="multipleAvailableSel.length == 0 || !isAdd"
				size="small"
				type="primary"
				icon="el-icon-d-arrow-left"
				>加 入</el-button
			>
			<el-button
				@click="handleGroupChange('delete')"
				:disabled="multipleManageSel.length == 0 || !isDelete"
				size="small"
				type="primary"
				>退 出 <i class="el-icon-d-arrow-right"></i
			></el-button>
		</div>
		<div style="width: 45%">
			<h4>可选{{ title }}</h4>
			<el-table
				:data="availableData"
				border
				style="margin-top:10px"
				@selection-change="handleAvailableSel"
			>
				<el-table-column type="selection" width="40"> </el-table-column>
				<el-table-column type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column :prop="colProp" label="名称"> </el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: '',
		},
		colProp: {
			type: String,
			default: 'name',
		},
		manageData: {
			type: Array,
		},
		availableData: {
			type: Array,
		},
		isAdd: {
			type: Boolean,
			default: false,
		},
		isDelete: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			multipleManageSel: [],
			multipleAvailableSel: [],
		}
	},
	created() {},
	methods: {
		// 选择管理的用户组
		handleManageSel(value) {
			this.multipleManageSel = value
		},
		// 勾选可选的用户组
		handleAvailableSel(value) {
			this.multipleAvailableSel = value
		},
		// 加入和退出组
		handleGroupChange(type) {
			let selectArr = []
			if (type === 'add') {
				// 添加角色
				selectArr = this.multipleAvailableSel
			} else {
				// 删除角色
				selectArr = this.multipleManageSel
			}
			this.$emit('tranChange', type, selectArr)
		},
	},
	watch: {},
}
</script>

<style lang="stylus" scoped>
.diolog-group-table
    display:flex
    .dialog-group-btn
        padding:0.2rem
        display:flex
        flex-direction column
        box-sizing:border-box
        .el-button
            margin: 0.2rem 0 0
</style>
